Video Speed Controller UI

透過播放速度條調整播放速度

實作

1. 當滑鼠在速度條上移動，監聽移動事件，算出在速度條上的比例，得到百分比，再動態修改速度條外觀，最後再調整video API的playbackRate以控制播放速度

    speed.addEventListener("mousemove", mousemove);
   
    function mousemove(e) {
        const y = e.pageY - this.offsetTop;
        const percent = y / this.offsetHeight;
        const min = 0.4;
        const max = 4;
        const height = Math.round(percent * 100) + "%";
        bar.style.height = height;
   
        const playbackRate = percent * (max - min) + min;
        video.playbackRate = playbackRate;
        bar.textContent = playbackRate.toFixed(2) + "x";
        video.playbackRate = playbackRate;
    }
   

知識點

• offsetHeight用來獲取element的高度
• offsetTop用來獲取element相對父元素頂部的距離